<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="automatic"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 绑定支付宝 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col gap-3 p-4">
      <view class="text-[.75rem] text-[#8E9299]">
        收款人信息与支付宝账户信息必须一致，否则无法提现！请确认无误后再填写账户信息</view
      >
      <view class="p-4 bg-white rounded-[.5rem] flex items-center">
        <view class="text-[.875rem] text-[#161A24] font-medium tt"> 姓名</view>
        <view>：</view>
        <input
          type="text"
          placeholder="请输入你的真实姓名"
          v-model="form.name"
          class="flex-1 text-[.9375rem] text-[#161A24]"
        />
        <view class="flex items-center pl-4">
          <image src="/static/dddr42.png" v-if="form.name" class="size-4" mode="aspectFill" @click="form.name = ''" />
        </view>
      </view>
      <view class="p-4 bg-white rounded-[.5rem] flex items-center">
        <view class="text-[.875rem] text-[#161A24] font-medium tt"> 身份证号</view>
        <view>：</view>

        <input
          type="idcard"
          placeholder="请输入你的身份证号"
          v-model="form.idNumber"
          class="flex-1 text-[.9375rem] text-[#161A24]"
          @blur="checkIdNumber"
        />
        <view class="flex items-center pl-4">
          <image
            src="/static/dddr42.png"
            v-if="form.idNumber"
            class="size-4"
            mode="aspectFill"
            @click="form.idNumber = ''"
          />
        </view>
      </view>
      <view class="p-4 bg-white rounded-[.5rem] flex items-center">
        <view class="text-[.875rem] text-[#161A24] font-medium tt whitespace-nowrap"> 支付宝账号</view>
        <view>：</view>

        <input
          type="text"
          placeholder="请输入你的支付宝账号"
          v-model="form.alipayAccount"
          class="flex-1 text-[.9375rem] text-[#161A24]"
        />
        <view class="flex items-center pl-4">
          <image
            src="/static/dddr42.png"
            v-if="form.alipayAccount"
            class="size-4"
            mode="aspectFill"
            @click="form.alipayAccount = ''"
          />
        </view>
      </view>
      <view class="p-4 bg-white rounded-[.5rem] flex items-center">
        <view class="text-[.875rem] text-[#161A24] font-medium tt"> 手机号</view>
        <view>：</view>

        <input
          type="tel"
          placeholder="请输入你的手机号"
          v-model="form.cellPhoneNumber"
          maxlength="11"
          @blur="checkCellPhoneNumber"
          class="flex-1 text-[.9375rem] text-[#161A24]"
        />
        <view class="flex items-center pl-4">
          <image
            src="/static/dddr42.png"
            v-if="form.cellPhoneNumber"
            class="size-4"
            mode="aspectFill"
            @click="form.cellPhoneNumber = ''"
          />
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="pb-env">
        <view class="px-4 py-3">
          <view class="flex justify-center">
            <view
              :class="isValid ? 'bg-[#99DBDC]' : 'bg-[#00A9AB]'"
              class="h-[2.75rem] w-full rounded-full flex items-center justify-center btn"
              @click="bindNow"
            >
              <text class="text-[1rem] text-[#E5F6F6]">立即绑定</text>
            </view>
          </view>
        </view>
      </view>
    </template>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        form: {
          name: '', // 姓名
          idNumber: '', // 身份证号
          alipayAccount: '', // 支付宝账号
          cellPhoneNumber: '' // 手机号
        },
        // 110102198805209696
        isValid: '' // 校验是否有效
      }
    },

    watch: {
      form: {
        immediate: true,
        deep: true,
        handler(newValue, oldValue) {
          this.isValid = vk.pubfn.isNullOneByObject(newValue)
        }
      }
    },
    onLoad(options) {
      // 模拟初始化数据
      // #ifdef H5
      this.form = {
        name: '张三',
        idNumber: '110102198805209696',
        alipayAccount: 'zhangsan@alipay.com',
        cellPhoneNumber: '13800138000'
      }
      // #endif
    },

    methods: {
      checkCellPhoneNumber() {
        // 验证手机号码格式
        if (!this.form.cellPhoneNumber) return
        const phonePattern = /^1[3-9]\d{9}$/
        if (!phonePattern.test(this.form.cellPhoneNumber)) {
          vk.toast('请输入正确的手机号码')
          return
        }
      },
      checkIdNumber() {
        // 验证身份证号码格式
        const idNumberPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        if (!this.form.idNumber) return
        if (!idNumberPattern.test(this.form.idNumber)) {
          vk.toast('请输入正确的身份证号码')
          return
        }

        // 验证身份证号码的校验码
        const idCardVerify = idCard => {
          const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
          let sum = 0
          let ai = 0
          let wi = 0
          for (let i = 0; i < 17; i++) {
            ai = idCard[i]
            wi = factor[i]
            sum += ai * wi
          }
          const last = parity[sum % 11]
          return last === idCard[17].toUpperCase()
        }

        if (this.form.idNumber.length === 18) {
          if (!idCardVerify(this.form.idNumber)) {
            vk.toast('身份证号码校验失败')
            return
          }
        }
      },
      async bindNow() {
        vk.pubfn.debounce(async () => {
          if (this.isValid) return vk.toast('请输入完整信息', 'none')
          let res = await api.bindWithdrawalAccount({
            name: this.form.name,
            id_card: this.form.idNumber,
            accounts: this.form.alipayAccount,
            mobile: this.form.cellPhoneNumber
          })
          if (!res.code) return vk.toast(res.msg)

          vk.toast(res.msg, 200, e => {
            vk.navigateBack()
          })
        }, 500)
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tt {
    width: 4.375rem;
    text-align-last: justify;
  }
</style>
